<template>
	<view class="order-list-content">
		<!-- tab -->
		<view class="tab-wrap">
			<zb-tab :activeStyle="{
			    fontWeight: 'bold',
			    transform: 'scale(1.1)'
			    }" :data="list0"  @change="tabChange"
				v-model="active" lineColor="#5ca45b" :scrollable="true"></zb-tab>
		</view>

		<!-- list -->
		<view class="list-wrap">
			<OrderItem v-for="order in orderList" :orderItem="order" :key="order.id" :use-path="0">
				<ListItem v-for="item in order.orderDetailList" :key="item.id" :itemData="item"></ListItem>
			</OrderItem>
		</view>
	</view>
</template>

<script>
	import ListItem from "./components/list-item.vue"
	import OrderItem from "./components/order-item.vue"
	import {
		getOrderListApi
	} from "@/http/order.js"

	export default {
		data() {
			return {
				active: 1,
				list0: [{
					name: '待支付',
					value: 1,
				}, {
					name: '待发货',
					value: 2,
				}, {
					name: '运输中',
					value: 3,
				}, {
					name: '已完成',
					value: 4,
				}, {
					name: '已取消',
					value: 5,
				}],
				orderListQuery:{
					page:0,
					pageSize:100,
					uId:null,
					status:0
				},
				orderList: []
			}
		},
		components: {
			ListItem,
			OrderItem
		},
		onLoad() {
			this.getOrderList();
		},
		methods: {
			// 获取订单列表
			async getOrderList() {
				const res = await getOrderListApi(this.orderListQuery);
				if(res){
					this.orderList = res.records;
				}
			
			},
			
			// tab改变
			tabChange(e){
				// console.log(e)
				this.orderListQuery.status = e.value;
				this.getOrderList();
			}
		}
	}
</script>

<style lang="less" scoped>
	.order-list-content {
		background-color: #fbf9ec;
		min-height: 100vh;

		.tab-wrap {
			position: fixed;
			width: 100%;
			z-index: 1000;
			// padding-bottom: 2;
		}

		.list-wrap {
			padding: 0 20rpx;
			padding-top: 90rpx;


		}
	}
</style>